<!--
 * @Description: 输入组件
-->
<template>
  <div class="cpt_grey_disabled" v-if="disabled">{{ value }}</div>
  <cus-input
    v-else
    :class="['_ehl_input', { _ehl_input_rows: rows > 1 }]"
    @input="valInput"
    @blur="blur"
    @clear="clearVal"
    @keyup.enter.native="$emit('enter', value)"
    :type="rows > 1 ? 'textarea' : 'text'"
    :placeholder="placeholder"
    :value="value"
    :title="value"
    :rows="rows"
    :autosize="{ minRows: rows, maxRows: maxrows }"
    :clearable="clearable"
    :disabled="disabled"
    :readonly="readonly"
    :show-password="password"
    :maxlength="Number(max)"
    :show-word-limit="limit"
    :prefix-icon="prefixIcon"
    :suffix-icon="suffixIcon"
  >
  </cus-input>
</template>
<script>
  export default {
    components: { cusInput: () => $import('cusInput') },
    props: {
      value: { default: () => '' },
      //显示清空按钮
      clearable: { type: Boolean, default: () => false },
      //显示多少行
      rows: { type: Number, default: () => 1 },
      //最多显示多少行
      maxrows: { type: Number, default: () => 4 },
      //是否不可编辑
      disabled: { type: Boolean, default: () => false },
      //是否只读
      readonly: { type: Boolean, default: () => false },
      //密码模式
      password: { type: Boolean, default: () => false },
      //字数最大值
      max: { type: [Number, String], default: () => 50 },
      //是否显示字数
      limit: { type: Boolean, default: () => false },
      //提示语句
      placeholder: { type: String, default: () => '请输入' },
      //前置图标
      prefixIcon: { type: String, default: () => '' }, //el-icon-search
      //后置图标
      suffixIcon: { type: String, default: () => '' }, //el-icon-search
      //对于输入框内容的规范
      format: {
        type: Function,
        default: (val, rows) => {
          if (rows === 1) {
            //正则表达式过滤非（中文，数字，字母，下划线，中横线，左右括号，点）
            return val
              .replace(/[^a-zA-Z0-9_\u4e00-\u9fa5\uff08\uff09\\(\\)-.]+/gi, '')
              .replace(/[\\*\\+]+/gi, '')
          } else {
            return val
          }
        },
      },
    },
    methods: {
      valInput(val) {
        let tmp = this.format(val, this.rows)
        this.$emit('input', tmp)
        this.$emit('change', tmp)
      },
      clearVal(val) {
        this.$emit('input', '')
        this.$emit('clear', '')
      },
      blur() {
        let tmp = this.format(this.value, this.rows)
        this.$emit('blur', tmp)
      },
    },
  }
</script>
